<template>
  <div class="page-wrap1">
    <Head title="基础信息" isBack>
      <template #content>
        <Detail
          :columns="2"
          :form="detailForm"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="车辆信息">
      <template #content>
        <Table
          ref="tableRef"
          :columns="tableColumns"
          @get-list="getData"
          :isPagination="false"
        ></Table>
      </template>
    </Head>
  </div>
</template>
 
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import { queryUserDetail } from '@/service/apis/user';
import { USER_TYPE } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

const tableRef = ref();

const detailForm = reactive([
  {
    label: '平台运营商',
    prop: 'channelName',
  },
  {
    label: '归属企业',
    prop: 'orgName',
  },
  {
    label: '用户账号',
    prop: 'accountNumber',
  },
  {
    label: '用户姓名',
    prop: 'userName',
  },
  {
    label: '手机号',
    prop: 'mobile',
  },
  {
    label: '用户卡号',
    prop: 'cardNum',
  },
  {
    label: '归属城市',
    prop: 'cityName',
  },
  {
    label: '状态',
    prop: 'isFrozen',
    // template: (row: any, index: number) => {
    //   console.log('row---', row.Frozen);
    //   return row.Frozen ? '冻结' : '正常';
    // },
    dic: USER_TYPE,
  },
  {
    label: '指定SOC停充开关',
    prop: 'socSwitch',
    template: (row: any) => {
      return row.socSwitch ? '开启' : '关闭';
    },
  },
  {
    label: 'SOC停充阈值',
    prop: 'socThreshold',
  },
  {
    label: '一号多充',
    prop: 'moreCharging',
    template: (row: any) => {
      return row.moreCharging ? '是' : '否';
    },
  },
]);
const tableColumns = reactive([
  {
    label: '车牌号',
    prop: 'plateNumber',
  },
  {
    label: '所有人',
    prop: 'owner',
  },
  {
    label: '车辆类型',
    prop: 'type',
  },
  {
    label: '品牌型号',
    prop: 'model',
  },
  {
    label: '车辆识别代码（VIN码）',
    prop: 'vin',
  },
]);

const data = reactive({
  detailData: {} as any,
});

const getData = () => {
  queryUserDetail({
    id: id,
  }).then((res: any) => {
    if (res) {
      data.detailData = res;
      nextTick(() => {
        tableRef.value.setTable({
          total: 1,
          table: res.carDTOList,
        });
      });
    }
  });
};
</script>
